<template>
  <div>
    <el-card style="width: 90%;margin: 20px auto;">
      <el-table ref="filterTable" :data="filterData" style="width: 100%" max-height="320"
        @select="handleSelectionChange" @select-all="handleSelectAll">

        <el-table-column fixed prop="id" label="工号">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>

        <el-table-column prop="states" label="状况" width="120">
        </el-table-column>
        <el-table-column prop="time" label="时间" width="200" sortable>

        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
import Topbar from "@/components/Topbar.vue";
export default {
  methods: {


    Delete() {

      for (let i = 0; i < this.checked.length; i++) {
        this.$axios.post('http://localhost:8090/atable1/remove', this.checked[i], {
          headers: {
            'Content-Type': 'application/json',
          }
        })
          .then(response => {
            console.log(this.checked);

          })
          .catch(error => {
            console.error(error);

            // 处理出错情况，例如显示错误信息等等
          });
      }
      this.checked = [];
      location.reload();
      //全选的删除
    },
    handleSelectionChange(value) {


      this.checked.push(value[this.checkednum].id);
      this.checkednum++;

    },
    handleSelectAll(value) {


      this.checked = [];
      this.checkednum = value.length - 1;

      value.forEach(item => {
        this.checked.push(item.id); // 将选中行的id添加到checked数组中
      });
    },
    search() {
      this.searchText = this.InPut;
    },

  },
  name: "role1Infive",
  components: { Topbar },
  mounted() {

    this.$axios.post('http://localhost:8090/absent/get', null, {
      headers: {
        'Content-Type': 'application/json',
      }
    })
      .then(response => {
        this.worker = response.data;
        console.log(this.worker);
        // 请求返回数据后，调用 filterData 方法进行数据过滤

      })
      .catch(error => {
        console.error(error);
        // 处理出错情况，例如显示错误信息等等
      });

  },
  data() {
    return {
      u: '',
      searchText: '异常',
      checkAll: false,
      Addview: false,
      checkednum: 0,
      checked: [
        {
          id: '',
        }
      ],
      isIndeterminate: true,
      Name: '',
      InPut: '',
      dialogVisible: false,

      worker: [{
        id: '',
        name: '',
        states: '',
        workhour: '',
        time: '',
      }]

    }
  },
  computed: {
    filterData() {

      const searchText = this.searchText.trim().toLowerCase();//大写转小写
      if (!searchText) {
        return this.worker;
      }
      else {
        return this.worker.filter((item) => {
          console.log(item);
          return (
            item.time.toLowerCase().includes(searchText) ||
            item.id.toLowerCase().includes(searchText) ||
            item.name.toLowerCase().includes(searchText) ||
            item.states.toLowerCase().includes(searchText)
          );

        })
      }
    },
  },
}

</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  margin-left: 400px;
  height: 500px;
  width: 55%;
}

.content {
  width: 80%;
  text-align: center;
  align-content: center
}
</style>